<template>
	<div v-show="showPicker" style="white-space:normal;word-break: break-all;margin:0;">
		<div style="display:flex;align-items:center;">
			<span
				class="color-span md-body-1"
				:style="{background:'rgba('+colorR+','+colorG+','+colorB+','+colorA+')',color:'rgba('+(255-colorR)+','+(255-colorG)+','+(255-colorB)+','+colorA+')',width:'auto',padding:'0 8px'}"
				@click="sendColor"
			>{{getLangText(label.ok)}}</span>
			<md-field :md-counter="false" style="margin-left:8px;width:calc(100% - 50px);">
				<label>HEX</label>
				<md-input v-model="colorText" maxlength="7"></md-input>
			</md-field>
		</div>

		<div class="rgba-color-input">
			<md-field :md-counter="false">
				<label>Red</label>
				<md-input v-model.number="colorR" maxlength="3"></md-input>
			</md-field>

			<md-field :md-counter="false">
				<label>Green</label>
				<md-input v-model.number="colorG" maxlength="10"></md-input>
			</md-field>

			<md-field :md-counter="false">
				<label>Blue</label>
				<md-input v-model.number="colorB" maxlength="3"></md-input>
			</md-field>
			<md-field :md-counter="false">
				<label>Alpha</label>
				<md-input v-model.number="colorA" maxlength="3"></md-input>
			</md-field>
		</div>

		<div :style="{height:pickerHeight?pickerHeight:'200px',overflowY:'auto'}">
			<span
				:style="{background:'rgb('+item.r+','+item.g+','+item.b+')'}"
				class="color-span"
				v-for="(item,idx) in colorList"
				:key="idx"
				@click="selectColor(item)"
			></span>
			<br />
			<span
				:style="{background:'transparent',width:'auto',padding:'0 8px'}"
				class="color-span md-body-1"
				@click="selectColor({r:255,g:255,b:255,a:0})"
			>{{getLangText(label.transparent)}}</span>
			<span
				:style="{background:'white',width:'auto',padding:'0 8px'}"
				class="color-span md-body-1"
				@click="selectColor({r:0,g:0,b:0,a:0})"
			>{{getLangText(label.none)}}</span>
		</div>
	</div>
</template>
<script>
	export default {
		name: "ColorPicker",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			rgba: {
				type: String,
				default: ""
			},

			showPicker: {
				type: Boolean,
				default: false
			},
			pickerHeight: {
				type: String,
				default: ""
			}
		},

		data: () => ({
			label: {
				title: { zh: "颜色选择器", en: "Color Picker" },
				close: { zh: "关闭", en: "CLOSE" },
				ok: { zh: "确定", en: "OK" },
				transparent: { zh: "透明", en: "transparent" },
				none: { zh: "无", en: "none" }
			},
			colorList: [],
			colorText: "#FFFFFF",
			rgbaText: "rgba(255,255,255,1)",
			colorR: 255,
			colorG: 255,
			colorB: 255,
			colorA: 1,
			isParse: false
		}),
		watch: {
			rgba() {
				if (this.rgba != this.rgbaText && this.rgba) {
					this.isParse = true;
					this.parseColor(this.rgba);
				}
			},
			rgbaText() {
				if (!this.isParse) this.sendColor();
			},
			colorText() {
				if (
					this.colorText.length == 7 &&
					this.colorText.indexOf("#") == 0 &&
					/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.colorText)
				) {
					this.textToRGB();
				}
			},
			colorR() {
				if (this.colorR > 255) {
					this.colorR = 255;
				} else if (this.colorR < 0) {
					this.colorR = 0;
				}

				this.RGBToText();
			},
			colorG() {
				if (this.colorG > 255) {
					this.colorG = 255;
				} else if (this.colorG < 0) {
					this.colorG = 0;
				}

				this.RGBToText();
			},
			colorB() {
				if (this.colorB > 255) {
					this.colorB = 255;
				} else if (this.colorB < 0) {
					this.colorB = 0;
				}

				this.RGBToText();
			},
			colorA() {
				if (this.colorA > 1) {
					this.colorA = 1;
				} else if (this.colorA < 0) {
					this.colorA = 0;
				}
				this.getRgbaText();
			}
		},
		methods: {
			parseColor(color) {
				color = new String(color).toLowerCase();
				if (color.indexOf("rgba(") == 0) {
					color = color.substring(5, color.length - 1);
					var colors = color.split(",");
					this.colorR = parseInt(colors[0]);
					this.colorG = parseInt(colors[1]);
					this.colorB = parseInt(colors[2]);
					this.colorA = parseFloat(colors[3]);
				} else if (color.indexOf("rgb(") == 0) {
					color = color.substring(4, color.length - 1);
					var colors = color.split(",");
					this.colorR = parseInt(colors[0]);
					this.colorG = parseInt(colors[1]);
					this.colorB = parseInt(colors[2]);
					this.colorA = 1;
				} else if (
					color.indexOf("#") == 0 &&
					color.length == 7 &&
					/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color)
				) {
					this.colorR = parseInt(color.substring(1, 3), 16);
					this.colorG = parseInt(color.substring(3, 5), 16);
					this.colorB = parseInt(color.substring(5, 7), 16);
					this.colorA = 1;
				} else if (color.indexOf("#") == 0 && color.length == 5) {
					this.colorR = parseInt(
						color.substring(1, 2) + color.substring(1, 2),
						16
					);
					this.colorG = parseInt(
						color.substring(2, 3) + color.substring(2, 3),
						16
					);
					this.colorB = parseInt(
						color.substring(3, 4) + color.substring(3, 4),
						16
					);
					this.colorA = (
						parseFloat(color.substring(4, 5) + color.substring(4, 5), 16) / 255
					).toFixed(2);
				} else if (
					color.indexOf("#") == 0 &&
					color.length == 4 &&
					/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color)
				) {
					this.colorR = parseInt(
						color.substring(1, 2) + color.substring(1, 2),
						16
					);
					this.colorG = parseInt(
						color.substring(2, 3) + color.substring(2, 3),
						16
					);
					this.colorB = parseInt(
						color.substring(3, 4) + color.substring(3, 4),
						16
					);
					this.colorA = 1;
				} else if (color == "transparent".toUpperCase()) {
					this.colorR = 0;
					this.colorG = 0;
					this.colorB = 0;
					this.colorA = 0;
				}
				if (this.colorA > 0) {
					this.RGBToText();
				}
				this.isParse = false;
			},
			sendColor() {
				this.$emit("color-result", {
					r: this.colorR,
					g: this.colorG,
					b: this.colorB,
					a: this.colorA,
					text: this.colorText,
					rgba: this.rgbaText
				});
				this.$emit("update:rgba", this.rgbaText);
			},
			getRgbaText() {
				if (
					this.colorR === "" ||
					this.colorG === "" ||
					this.colorB === "" ||
					this.colorA === ""
				) {
					this.rgbaText = "";
				} else {
					this.rgbaText =
						this.colorA > 0
							? "rgba(" +
							  this.colorR +
							  "," +
							  this.colorG +
							  "," +
							  this.colorB +
							  "," +
							  this.colorA +
							  ")"
							: "transparent";
				}
			},
			textToRGB() {
				this.colorR = parseInt(this.colorText.substring(1, 3), 16);
				this.colorG = parseInt(this.colorText.substring(3, 5), 16);
				this.colorB = parseInt(this.colorText.substring(5, 7), 16);
				// this.colorA = 1;
				this.getRgbaText();
			},
			RGBToText() {
				var r =
					this.colorR > 15
						? this.colorR.toString(16)
						: "0" + this.colorR.toString(16);
				var g =
					this.colorG > 15
						? this.colorG.toString(16)
						: "0" + this.colorG.toString(16);
				var b =
					this.colorB > 15
						? this.colorB.toString(16)
						: "0" + this.colorB.toString(16);

				this.colorText =
					"#" + r.toUpperCase() + g.toUpperCase() + b.toUpperCase();
				this.getRgbaText();
			},
			selectColor(item) {
				this.colorR = item.r;
				this.colorG = item.g;
				this.colorB = item.b;
				this.colorA = item.a;
				this.RGBToText();
			},
			createColor() {
				var colors = [];

				for (var i = 0; i <= 5; i++) {
					for (var j = 0; j <= 5; j++) {
						for (var k = 0; k <= 5; k++) {
							colors.push({ r: i * 51, g: j * 51, b: k * 51, a: 1 });
						}
					}
				}
				this.colorList = colors;
			}
		},
		mounted() {
			this.createColor();
			if (this.rgba) {
				this.parseColor(this.rgba);
			}
		},
		beforeDestroy() {}
	};
</script>
<style lang="scss" scoped>
	.rgba-color-input {
		display: flex;
		flex-direction: row;
		padding: 0 8px;
		margin-bottom: 16px;
		.md-field {
			display: inline-block;
			flex: 1;
			width: 20%;
			margin: 0 4px;
		}
	}
</style>

